<template>
  <!-- 选择API -->
  <div class="container">
    <el-form :model="queryParams" ref="stepXzapiFormRef">
      <el-row>
        <el-col :span="7">
          <el-form-item label="所属应用：" prop="appId">
            <el-select
              v-model="queryParams.appId"
              placeholder="请选择所属应用"
              style="width: 150px"
            >
              <el-option
                v-for="item in applicationOptions"
                :key="item.appId"
                :label="item.appName"
                :value="item.appId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="接口编码：" prop="apiCodeLike">
            <el-input
              v-model="queryParams.apiCodeLike"
              placeholder="请输入接口编码"
              clearable
              style="width: 130px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="接口名称：" prop="apiNameLike">
            <el-input
              v-model="queryParams.apiNameLike"
              placeholder="请输入接口名称"
              clearable
              style="width: 130px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <search-button @click="handleQuery" />
            <reset-button @click="resetQuery" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      highlight-current-row
      style="margin-top: 10px"
      @row-click="onRowClick"
    >
      <el-table-column label="选择" width="55" align="center">

          <template #default="{ row }">
              <el-radio
                      v-model="chooseVerId"
                      :label="row.apiVerId"
                      @change="handleChooseApi(row)"
              >{{ "" }}</el-radio>
          </template>


<!--        <template #default="scope">-->
<!--          <el-radio-->
<!--            :value="chooseVerId"-->
<!--            :label="scope.row.apiVerId"-->
<!--            @change="handleChooseApi(scope.row)"-->
<!--            >{{ "" }}</el-radio-->
<!--          >-->
<!--        </template>-->
      </el-table-column>
      <el-table-column
        label="接口编码"
        prop="apiCode"
        :show-overflow-tooltip="true"
        min-width="100"
      />
      <el-table-column
        label="接口名称"
        prop="apiName"
        :show-overflow-tooltip="true"
        min-width="100"
      />
      <el-table-column
        label="所属应用"
        prop="appName"
        :show-overflow-tooltip="true"
        min-width="100"
      />
      <el-table-column
        label="接口类型"
        prop="apiType"
        :show-overflow-tooltip="true"
        min-width="100"
      >
        <template #default="scope">
          <span>{{
            selectDictLabel(protocolTypeList, scope.row.apiType)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="请求路径"
        prop="apiUrl"
        :show-overflow-tooltip="true"
        min-width="100"
      />
      <el-table-column
        label="接口版本"
        prop="apiVersion"
        :show-overflow-tooltip="true"
        min-width="100"
      />
    </el-table>
    <div class="pagination">
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </div>
  </div>
</template>

<script>
// import { mapActions, mapMutations, mapState } from "vuex";

import {serviceStore} from '@slc/store/service';
import {flowServiceStore} from '@slc/store/flowService';
import {mapActions, mapState} from 'pinia';


import { listAllApp } from "@slc/api/slc/system";
export default {
  name: "step-xzapi",
  data() {
    return {
      total: 100,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        apiCodeLike: "",
        apiNameLike: "",
        appId: "",
      },
      tableData: [],
      applicationOptions: [],
    };
  },
  async created() {
    listAllApp().then((response) => {
      this.applicationOptions = response.data;
    });
    // 复合编排弹框不走activated
    if (this.serverReleaseType === "2") {
      this.handleQuery();
    }
  },
  activated() {
    console.log('activated')
    this.handleQuery();
  },
  computed: {
    ...mapState(serviceStore, [
      "zhpzInfo",
      "chooseApiInfo",
      "pzxxInfo",
      "serverReleaseType",
      "protocolTypeList",
    ]),
    ...mapState(flowServiceStore, ["selectNode", "moreNodeInfo", "currentNodeId"]),
    chooseVerId() {
      if (this.serverReleaseType === '2') {
        return this.moreNodeInfo[this.currentNodeId] && this.moreNodeInfo[this.currentNodeId].apiVerId
      } else if (this.serverReleaseType === '1' || this.serverReleaseType === '3') {
        return this.chooseApiInfo.apiVerId
      } else {
        return false
      }
    }
  },
  methods: {
    ...mapActions(serviceStore, ["setChooseApiInfo", "setPzxxInfo",'getEffectiveApiData']),
    ...mapActions(flowServiceStore, ["setMoreNodeInfo"]),
    async handleQuery() {
      let apiType = "";
      // 复合编排
      if (this.serverReleaseType === "2") {
        apiType = this.selectNode.data.apiType;
      }
      // 协议转换
      if (this.serverReleaseType === "3") {
        apiType = this.zhpzInfo.originApiType;
      }
      const res = await this.getEffectiveApiData({
        ...this.queryParams,
        apiType,
      });
      this.total = res.total;
      this.tableData = res.list;
    },
    onRowClick(row) {
      this.handleChooseApi(row);
    },
    handleChooseApi(row) {
      this.$emit('onChoose', row)
      if (this.serverReleaseType === '2') {
        this.setMoreNodeInfo({
          ...this.moreNodeInfo,
          [this.currentNodeId]: row,
        });
      }
      if (this.serverReleaseType === "1" || this.serverReleaseType === "3") {
        let obj
        const commonData = {
          alarmSecs: row.alarmSecs,
          timeoutSecs: row.timeoutSecs,
          retryTimes: row.retryTimes,
          limitCtrlStatus: row.limitCtrlStatus,
          limitCtrlType: row.limitCtrlType,
          limitCtrlParamval: row.limitCtrlParamval,
          jmsDatasourceCode: row.jmsDatasourceCode,
          jmsType: row.jmsType,
          jmsDestinationName: row.jmsDestinationName,
          jmsRole: row.jmsRole,
        }
        switch (this.serverReleaseType) {
          case '1':
            obj = {
              serviceName: row.apiName,
              servicePath: row.servicePath,
              serviceDesc: row.apiDesc,
              serviceType: row.apiType,
              httpRequestMethod: row.httpRequestMethod,
              ...commonData
            }
            break;
          case '3':
            obj = {
              serviceName: row.apiName,
              serviceDesc: row.apiDesc,
              ...commonData
            }
            break;
          default:
            break;
        }
        this.setPzxxInfo({
          ...this.pzxxInfo,
          ...obj
        });
        this.setChooseApiInfo(row);
      }
    },
    resetQuery() {
      this.resetForm("stepXzapiFormRef");
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding: 16px;
  .pagination {
    margin-bottom: 16px;
  }
}
</style>
